<template>
  <main id="home" class="view">
<!--     <div class="heading">
      <h1><span>Mand Mobile</span></h1>
      <p>一个基于Vue的移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。</p>
      </div>
      <md-button @click="handleClick">点我</md-button> -->
      <div class="header"></div>
      <div class="top">
        <img src="../assets/images/logo.png">
        <router-link to="/List"><div><input type="text" name="keywords" v-model="keywords" readonly="readonly" style="border:solid 1px #666;">
        <div class="btn" @click="search">搜索</div></div></router-link>
      </div>
      <!-- <div class="banner"> -->
        <div class="md-example-child md-example-child-swiper md-example-child-swiper-0">
          <md-swiper
            ref="swiper"
            :is-prevent="false"
            :useNative-driver="false"
          >
            <md-swiper-item :key="$index" v-for="(item, $index) in simple">
              <div class="banner-item">
                <img :src="item.thumb" style="width: 100%;height: 100%;">
              {{item.title}}
              </div>
            </md-swiper-item>
          </md-swiper>
        <!-- </div> -->
      </div>
      <div class="icon">
        <ul>
          <li v-for="item in items" ><router-link :to="item.link" ><img :src="item.icon"><p>{{item.label}}</p></router-link></li>
        </ul>
      </div>
      
      <div class="news">
        <div class="n">
          <span class="n1">最新</span><span class="n2">咨询</span>
        </div>
        <NewsList :list="news"></NewsList>
        <div style="clear:both;height: 20px;"></div> 
      </div>    

      <Footer></Footer>
  </main>
</template>

<script>
// import { Button, Toast } from 'mand-mobile'
import { test } from '../api'
import NewsList from './common/NewsList'
import Footer from './common/Footer'
import {Swiper, SwiperItem} from 'mand-mobile'
// import Num1Png from '../assets/images/001.png'
import Num2Png from '../assets/images/002.png'
import Num3Png from '../assets/images/003.png'
import Num4Png from '../assets/images/004.png'
import Num5Png from '../assets/images/005.png'
import Num6Png from '../assets/images/006.png'
import Num7Png from '../assets/images/007.png'
import Num8Png from '../assets/images/008.png'

// export default {
//   name: 'App',
//   components: {
//     [Button.name]: Button
//   },
//   methods: {
//     handleClick () {
//       test().then(res=>{
//         console.log(res);
//       });
//       Toast.info('不错哟~')
//     }
//   }
// }
export default {
  name: 'swiper-demo',
  components: {
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
    NewsList,
    Footer,
  },
  data() {
    return {
      simple:{},
      news:{},
      keywords:'',
      items: [{name: 1, label: '大美安徽', link: '/Detail', icon: require( '../assets/images/001.png')}, 
      {name: 2, label: '地市稿件', link: '/City', icon: Num2Png}, 
      {name: 3, label: '便民服务', link: '/Serv', icon: Num3Png}, 
      {name: 4, label: '游客意见', link: '/Visitor', icon: Num4Png}, 
      {name: 5, label: '用稿平台', link: '/Plat', icon: Num5Png},
      {name: 6, label: '随手拍拍', link: '/Photo', icon: Num6Png},
      {name: 7, label: '旅游矩阵', link: '/matrix', icon: Num7Png},
      {name: 8, label: '个人中心', link: '/Self', icon: Num8Png},],
    }
  },
  mounted() {
   
  },
  created() {
    console.log(this.$route);
    test().then(res=>{
      this.simple = res.banner
      this.news = res.list
    
        console.log(res);      
    })
  },
  methods: {
    search() {
      // this.keywords='123'
      console.log(this.keywords)
      this.$router.push({ path: '/List'})
    }
  },
}

</script>

<style lang="stylus" scoped>
.md-example-child-swiper-0
  height 250px
  .banner-item
    float left
    width 100%
    height 100%
    line-height 250px
    text-align center
    font-size 28px
    color #FFF
    box-align center
    align-items center
    box-pack center
    justify-content center
    text-decoration-line none
</style>